<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于 | 代码狂想</title>
    <style>
        /* 基础样式与野蛮主义风格 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            background-color: #f0f0f0;
            color: #222;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 野蛮主义风格特点：粗体、不对称、高对比度 */
        header {
            background-color: #000;
            color: #fff;
            padding: 30px;
            margin-bottom: 30px;
            border: 5px solid #ff0066;
            position: relative;
        }

        h1 {
            font-size: 4rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: -2px;
            line-height: 1;
        }

        .tagline {
            font-size: 1.5rem;
            margin-top: 10px;
            color: #ff0066;
        }

        /* 导航样式 - 保持原始链接外观但放大 */
        nav {
            background-color: #ff0066;
            padding: 15px;
            margin-bottom: 30px;
        }

        nav ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
        }

        nav li {
            margin-right: 30px;
        }

        nav a {
            color: #000;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.2rem;
            padding: 5px 10px;
            background-color: #fff;
        }

        nav a:hover {
            background-color: #000;
            color: #fff;
        }

        /* 主要内容区域 - 不对称布局 */
        .container {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
        }

        /* 关于页面特定样式 */
        .about-section {
            background-color: #fff;
            padding: 30px;
            margin-bottom: 30px;
            border: 3px solid #000;
            box-shadow: 8px 8px 0 #000;
        }

        .about-section h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            color: #ff0066;
            border-bottom: 2px solid #000;
            padding-bottom: 10px;
        }

        .about-section h3 {
            font-size: 1.8rem;
            margin: 25px 0 15px;
            color: #333;
        }

        .about-section p {
            margin-bottom: 15px;
        }

        .about-section ul {
            margin-left: 20px;
            margin-bottom: 15px;
        }

        .about-section li {
            margin-bottom: 8px;
        }

        .team-member {
            display: flex;
            margin-bottom: 30px;
            padding: 20px;
            background-color: #f9f9f9;
            border: 2px solid #000;
        }

        .member-info {
            flex: 1;
        }

        .member-info h4 {
            font-size: 1.5rem;
            margin-bottom: 5px;
            color: #ff0066;
        }

        .member-role {
            font-style: italic;
            margin-bottom: 10px;
            color: #666;
        }

        .contact-info {
            background-color: #000;
            color: #fff;
            padding: 25px;
            margin-top: 30px;
            border: 3px solid #ff0066;
        }

        .contact-info h3 {
            color: #ff0066;
            margin-bottom: 15px;
        }

        .contact-info p {
            margin-bottom: 10px;
        }

        /* 侧边栏 */
        aside {
            background-color: #000;
            color: #fff;
            padding: 25px;
            border: 3px solid #ff0066;
        }

        aside h3 {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: #ff0066;
        }

        .categories ul {
            list-style: none;
        }

        .categories li {
            margin-bottom: 10px;
            padding: 8px;
            background-color: #333;
        }

        .categories a {
            color: #fff;
            text-decoration: none;
        }

        /* 野蛮主义风格的特色元素 */
        .brutal-element {
            height: 10px;
            background-color: #ff0066;
            margin: 20px 0;
        }

        .related-articles {
            margin-top: 30px;
        }

        .related-article {
            margin-bottom: 15px;
            padding: 10px;
            background-color: #333;
        }

        .related-article a {
            color: #fff;
            text-decoration: none;
        }

        .related-article a:hover {
            color: #ff0066;
        }

        footer {
            background-color: #000;
            color: #fff;
            padding: 30px;
            text-align: center;
            margin-top: 30px;
            border-top: 5px solid #ff0066;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr;
            }

            h1 {
                font-size: 2.5rem;
            }

            nav ul {
                flex-direction: column;
            }

            nav li {
                margin-bottom: 10px;
            }

            .team-member {
                flex-direction: column;
            }
        }
    </style>
</head>

<body>
    <header>
        <h1>代码狂想</h1>
        <p class="tagline">原始 · 直接 · 不妥协的技术思考</p>
    </header>

    <nav>
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="#">前端开发</a></li>
            <li><a href="#">后端架构</a></li>
            <li><a href="#">算法与数据结构</a></li>
            <li><a href="#">设计模式</a></li>
            <li><a href="about.html">关于</a></li>
        </ul>
    </nav>

    <div class="container">
        <main>
            <div class="about-section">
                <h2>关于代码狂想</h2>
                <p>代码狂想是一个专注于技术深度和原始表达的技术博客。我们拒绝浮夸的设计，专注于内容的本质。</p>

                <h3>我们的使命</h3>
                <p>在技术内容日益同质化的今天，我们致力于提供独特、深入且不加修饰的技术见解。我们相信，真正的技术价值不在于华丽的包装，而在于内容的深度和实用性。</p>

                <h3>内容创作原则</h3>
                <ul>
                    <li><strong>深度优先：</strong>我们追求对技术主题的深入理解，而非表面的概述</li>
                    <li><strong>实用性导向：</strong>所有内容都旨在解决实际开发中的问题</li>
                    <li><strong>诚实表达：</strong>我们不回避技术的局限性和挑战</li>
                    <li><strong>持续学习：</strong>我们视技术为不断演进的领域，保持开放的学习态度</li>
                </ul>

                <h3>设计哲学</h3>
                <p>我们的网站采用野蛮主义设计风格，这是对过度设计、用户界面同质化的有意反击。我们相信：</p>
                <ul>
                    <li>功能应优先于形式</li>
                    <li>内容应优先于装饰</li>
                    <li>原始表达比精心包装更有力量</li>
                    <li>高对比度和不对称布局能够增强内容的视觉冲击力</li>
                </ul>

                <h3>团队</h3>
                <div class="team-member">
                    <div class="member-info">
                        <h4>代码狂人</h4>
                        <p class="member-role">创始人 & 首席作者</p>
                        <p>15年全栈开发经验，专注于系统架构和性能优化。坚信简洁的代码是最好的代码。</p>
                    </div>
                </div>

                <div class="team-member">
                    <div class="member-info">
                        <h4>算法猎人</h4>
                        <p class="member-role">算法专家</p>
                        <p>前竞赛选手，现专注于将复杂的算法概念转化为实用的开发技巧。</p>
                    </div>
                </div>

                <div class="contact-info">
                    <h3>联系我们</h3>
                    <p>我们欢迎技术讨论、内容建议或任何形式的合作。</p>
                    <p>邮箱: contact@codecraze.blog</p>
                    <p>GitHub: github.com/codecraze</p>
                    <p>Twitter: @codecraze_blog</p>
                </div>
            </div>
        </main>

        <aside>
            <div class="categories">
                <h3>分类</h3>
                <ul>
                    <li><a href="#">前端开发 (12)</a></li>
                    <li><a href="#">后端架构 (8)</a></li>
                    <li><a href="#">JavaScript (15)</a></li>
                    <li><a href="#">Python (7)</a></li>
                    <li><a href="#">数据库 (5)</a></li>
                    <li><a href="#">DevOps (6)</a></li>
                    <li><a href="#">算法 (10)</a></li>
                </ul>
            </div>

            <div class="brutal-element"></div>

            <div class="about">
                <h3>关于本站</h3>
                <p>代码狂想是一个专注于技术深度和原始表达的技术博客。我们拒绝浮夸的设计，专注于内容的本质。</p>
            </div>

            <div class="brutal-element"></div>

            <div class="related-articles">
                <h3>热门文章</h3>
                <div class="related-article">
                    <a href="detail.html">野蛮主义在Web设计中的复兴</a>
                </div>
                <div class="related-article">
                    <a href="detail.html">JavaScript引擎优化技巧</a>
                </div>
                <div class="related-article">
                    <a href="detail.html">微服务架构的陷阱与解决方案</a>
                </div>
            </div>

            <div class="brutal-element"></div>

            <div class="subscribe">
                <h3>订阅更新</h3>
                <form>
                    <input type="email" placeholder="你的电子邮箱"
                        style="padding: 10px; width: 100%; margin-bottom: 10px; border: 2px solid #ff0066;">
                    <button type="submit"
                        style="padding: 10px; width: 100%; background: #ff0066; color: white; border: none; font-weight: bold;">订阅</button>
                </form>
            </div>
        </aside>
    </div>

    <footer>
        <p>代码狂想 &copy; 2023 · 遵循野蛮主义设计原则构建</p>
        <p>联系方式: contact@codecraze.blog</p>
    </footer>
</body>

</html>